import { ColumnHeightOutlined } from "@ant-design/icons";
import { Button, Dropdown, type MenuProps } from "@/components/base";
import { useObserver } from "mobx-react-lite";
import React from "react";
import { PageTable } from "../..";

/**
 * 表格大小调整按钮
 */
export function TableSize() {

    const controller = React.useContext(PageTable.Controller.context);

    const items: MenuProps['items'] = React.useMemo(() => [
        {
            key: '1',
            label: '默认',
            onClick: () => {
                controller.size = 'middle'; // 设置表格大小为默认
            }
        },
        {
            key: '2',
            label: '大号',
            onClick: () => {
                controller.size = 'large'; // 设置表格大小为
            }
        },
        {
            key: '3',
            label: '紧凑',
            onClick: () => {
                controller.size = 'small'; // 设置表格大小为紧凑
            }
        },
    ], [controller]);

    return useObserver(() => (
        <Dropdown menu={{ items }} trigger={['click']} >
            <Button size='small' icon={<ColumnHeightOutlined />} />
        </Dropdown>
    ))
}